import { Button } from 'antd';
import Table, { type ColumnsType } from 'antd/es/table';
import { useEffect, useState } from 'react';

import marketService from '@/api/services/marketService';
import ProTag from '@/theme/antd/components/tag';

export default function List({ id, doSearch }: any) {
  const [result, setResult] = useState<any>({
    total: 0,
    list: [],
    page: 1,
    pageSize: 10,
  });
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    getList({
      page: result.page,
      pageSize: result.pageSize,
    });
  }, [id, result.page, result.pageSize]);

  const getList = (params: { page?: number; pageSize?: number }) => {
    setLoading(true);
    console.log('params', params);
    marketService.getMarketList(params).then((res: any) => {
      setLoading(false);
      setResult(res);
    });
  };

  const columns: ColumnsType<any> = [
    {
      title: '区域',
      dataIndex: 'area',
      width: 100,
    },
    {
      title: 'GPU型号',
      dataIndex: 'gpu',
      width: 200,
      render: (_, record: any) => {
        return (
          <div>
            <div>{record.gpu.name}</div>
            {record?.gpu?.tag?.map((tag: string, index: number) => {
              return (
                <ProTag color="cyan" key={index}>
                  {tag}
                </ProTag>
              );
            })}
          </div>
        );
      },
    },
    {
      title: 'CPU型号',
      dataIndex: 'cpu',
      width: 150,
      render: (_, record: any) => {
        return <div>{record.cpu?.name}</div>;
      },
    },
    {
      title: '内存',
      dataIndex: 'memory',
      width: 200,
      render: (_, record: any) => {
        return <div>{record.memory?.name}</div>;
      },
    },
    {
      title: '磁盘',
      dataIndex: 'disk',
      width: 350,
      render: (_, record: any) => {
        return (
          <div>
            <div>{record.disk?.name}</div>
          </div>
        );
      },
    },
    {
      title: '数量',
      dataIndex: 'count',
      width: 100,
    },
    {
      title: '挂牌时间',
      dataIndex: 'listing-time',
      width: 300,
    },
    {
      title: '挂牌价(月)',
      dataIndex: 'price',
      width: 300,
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: 300,
      render: () => {
        return (
          <div className="flex items-baseline">
            <Button className="ml-4 cursor-pointer md:block" type="text">
              详情
            </Button>
            <Button className="ml-4 cursor-pointer md:block" type="text">
              吃单
            </Button>
          </div>
        );
      },
    },
  ];

  return (
    <Table
      rowKey="id"
      size="small"
      scroll={{ x: 'max-content' }}
      columns={columns}
      dataSource={result?.list}
      loading={loading}
      pagination={{
        pageSize: result?.pageSize,
        total: result?.total,
        showSizeChanger: true,
        current: result?.page,
        onChange: (page, pageSize) => {
          setResult({ ...result, page, pageSize });
        },
      }}
    />
  );
}
